<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>预测结果 - 航班乘客付费选座预测系统</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.8/dist/chart.umd.min.js"></script>
</head>
<body class="bg-gray-100">
    <div class="container mx-auto px-4 py-8 max-w-4xl">
        <header class="text-center mb-8">
            <h1 class="text-3xl font-bold text-gray-800">航班乘客付费选座预测系统</h1>
            <p class="text-gray-600 mt-2">预测结果分析</p>
        </header>

        <!-- 导航菜单 -->
        <nav class="bg-white rounded-lg shadow-md p-4 mb-8">
            <ul class="flex flex-wrap gap-4 justify-center">
                <li><a href="/" class="text-blue-600 hover:text-blue-800 flex items-center"><i class="fa fa-home mr-1"></i>首页</a></li>
                <li><a href="/result" class="text-blue-600 hover:text-blue-800 flex items-center"><i class="fa fa-bar-chart mr-1"></i>预测结果</a></li>
                <li><a href="/suggestions" class="text-blue-600 hover:text-blue-800 flex items-center"><i class="fa fa-lightbulb-o mr-1"></极i>营销建议</a></li>
                {% if current_user.is_admin %}
                <li><a href="/admin" class="text-purple-600 hover:text-purple-800 flex items-center"><i class="fa fa-cog mr-1"></i>系统管理</a></li>
                {% endif %}
                <li><a href="/logout" class="text-red-600 hover:text-red-800 flex items-center"><i class="fa fa-sign-out mr-1"></i>退出登录</a></li>
            </ul>
        </nav>

        {% if not result %}
        <div class="bg-yellow-50 border border-yellow-200 text-yellow-700 p-4 rounded-md mb-6 text-center">
            <p>请先在首页填写乘客信息并进行预测</p>
            <a href="/" class="text-blue-600 hover:underline mt-2 inline-block">返回首页</a>
        </div>
        {% else %}
        <!-- 预测结果 -->
        <div class="bg-white rounded-lg shadow-md p-6 mb-8">
            <h2 class="text-xl font-semibold mb-6 text-gray-700 text-center">
                <i class="fa fa-bar-chart mr-2"></i>付费选座预测结果
            </h2>

            <div class="text-center mb-8">
                <p class="text-2xl font-medium mb-4">
                    {{ '该乘客很可能会付费选座' if result.prediction else '该乘客不太可能付费选座' }}
                </p>
                <p class="text-gray-600 mb-6">付费概率: <span class="text-2xl font-bold text-blue-600">{{ (result.probability * 100)|round(1) }}%</span></p>

                <div class="w-full max-w-xl mx-auto bg-gray-200 rounded-full h-6 mb-2">
                    <div class="h-6 rounded-full" 
                         style="width: {{ (result.probability * 100)|round(0) }}%; 
                                background-color: {{ '#10b981' if result.probability >= 0.7 else '#f59e0b' if result.probability >= 0.3 else '#ef4444' }}">
                    </div>
                </div>
            </div>
        </div>

        <!-- 操作按钮 -->
        <div class="flex justify-between mt-8">
            <a href="/" class="bg-gray-600 text-white py-2 px-6 rounded-md hover:bg-gray-700 transition flex items-center">
                <i class="fa fa-arrow-left mr-2"></i>返回重新填写
            </a>
            <a href="/suggestions" class="bg-purple-600 text-white py-2 px-6 rounded-md hover:bg-purple-700 transition flex items-center">
                查看营销建议 <i class="fa fa-arrow-right mr-2"></i>
            </a>
        </div>
        {% endif %}

        <footer class="mt-12 text-center text-gray-500 text-sm">
            <p>航班乘客付费选座预测系统 &copy; 2023</p>
        </footer>
    </div>
</body>
</html>